<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-01-31 16:40:20
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-02-02 10:08:08
 * @FilePath: /hr_new_vue3/src/views/Management/Human/BaseSetting/IntershipSetting/IntershipEvaluation/Components/Preview/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%B
-->
<!-- 预览模板 -->
<template>
  <a-modal
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    width="80%"
    :mask-closable="false"
    title-align="center"
    unmountOnClose
    :body-style="{
      height: '500px'
    }"
  >
    <template #title> {{ data?.name }} </template>
    <a-form
      ref="formRef"
      direction="vertical"
      :model="formData"
      auto-label-width
      disabled
    >
      <a-form-item field="name" label="模板名称">
        <a-input placeholder="模板名称" v-model="formData.name" />
      </a-form-item>
      <a-form-item field="explain" label="模板说明">
        <a-textarea
          placeholder="模板说明"
          v-model="formData.remark"
          :auto-size="{
            minRows: 3
          }"
          :max-length="300"
          show-word-limit
        />
      </a-form-item>
      <a-form-item field="type" label="模板尺寸">
        <a-space direction="vertical" size="large">
          <a-radio-group :default-value="1" v-model="formData.direction">
            <a-radio :value="1">A4 纵版</a-radio>
            <a-radio :value="2">A4 横版</a-radio>
          </a-radio-group>
        </a-space>
      </a-form-item>
      <a-form-item field="enable" label="是否启用">
        <a-switch
          :checked-value="1"
          :unchecked-value="2"
          v-model="formData.enable"
        />
      </a-form-item>
      <a-form-item field="approve" label="是否审批">
        <a-switch
          :checked-value="1"
          :unchecked-value="2"
          v-model="formData.approve"
        />
      </a-form-item>
      <a-form-item field="content" label="模板内容">
        <div class="content">
          <section>
            <RichTextNew
              v-model:content="formData.text"
              :width="1000"
              ref="rich"
              disabled
            ></RichTextNew>
          </section>
        </div>
      </a-form-item>
      <!-- <a-form-item field="file" label="附件">
        <a-button @click="upload()">上传文件</a-button>
      </a-form-item> -->
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
const props = defineProps<{
  visible: boolean;
  data: any;
}>();

const emits = defineEmits(['update:visible', 'contractAttachmentTemplateEmit']);

const rulesData = [{}, {}];
const formData = ref();

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      formData.value = props.data;
      console.log('====================================');
      console.log(formData.value);
      console.log('====================================');
    }
  }
);

const handleOk = () => {
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>
<style scoped lang="less">
.index-card {
  border-radius: 4px;

  // margin: 20px 0;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  padding: 20px;
  .title {
    font-weight: 600;
    font-size: 18px;
  }
}

.index-add,
.custom-add {
  width: calc(100% - 2px);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #eee;
}

.custom-add {
  background-color: #e5f1ff;
  margin-top: 20px;
}
</style>
